(function($) {
    //dependent on mobiscroll scroller
    $.fn.multiSelect = function(options){
        this.filter('select').each(function() {
            var placeHolder = '';
            if(typeof options != 'undefined'){
                placeHolder = options.placeholder;
            }
            var $this = $(this);
            var that = this;
            var select = function(ev, args){
               $this = $(this);
               var $selectArea =  $('#' + $(this).attr('id') + '-multiselect');
               $this.parent().find('input[id$="_dummy"]').val('')
               var currVals = JSON.parse($selectArea.attr('data-values'));
               var currValue = $this.val();
               if($.trim(currValue) != ''){
                   var currOption = $(this).find('option[value="'+currValue+'"]');
                   var currOptionLabel = currOption.html();
                   currVals[currValue] = currOptionLabel;
                   currOption.remove();
                   $selectArea.find('ol').html('');
                   for(var key in currVals){
                       if(currVals.hasOwnProperty(key)){
                           var valDiv = '<div data-val="multiselect-item-'+key+'"><i class="icon-remove"></i>' + currVals[key] + '</div>';
                           var selection =  '<li style="border:solid 1px #000000; padding:2px;">' + valDiv + '</li>';
                           $selectArea.find('ol').append(selection);
                       }
                   }
                   $('li div', $selectArea).off('click').on('click', function(ev){
                       var $target = $(ev.currentTarget);
                       var $li = $target.parent();
                       var $multiSelect = $target.parent().parent().parent();
                       var $dummy = $multiSelect.parent().find('input[id$="_dummy"]');
                       var vals = JSON.parse($multiSelect.attr('data-values'));
                       var valueId = $target.attr('data-val').replace('multiselect-item-','');
                       $multiSelect.parent()
                                   .find('select')
                                   .prepend($('<option></option>').attr('value', $target.attr('data-val'))
                                                                 .html(vals[valueId]));
                       delete vals[valueId];
                       $multiSelect.attr('data-values', JSON.stringify(vals));
                       $target.remove();
                       $li.remove();
                       $dummy.val('');
                   });
                   $selectArea.attr('data-values', JSON.stringify(currVals));
               }
               
            };
            $this.mobiscroll('option', 'onSelect', select);
            var values = $this.attr('data-value').split(',');
            
            var $dummy = $this.parent().find('input[id$="_dummy"]');
            $dummy.removeAttr('readOnly');
            $dummy.val('');
            $dummy.attr('placeholder', placeHolder);
            var selectArea = $('<div class="span2"></div>');
            selectArea.attr('id', $this.attr('id') + '-multiselect');
            selectArea.append($('<ol></ol>'));
            $this.parent().append(selectArea);
            var vals = {};
            for(var i=0;i<values.length;i++){
                var val = values[i];
                var option = $this.find('option[value="' + val + '"]');
                if(option.length > 0){
                    vals[val] = option.html();
                    var valDiv = '<div data-val="multiselect-item-'+val+'"><i class="icon-remove"></i>' + option.html() + '</div>';
                    var selection =  '<li style="border:solid 1px #000000; padding:2px;">' + valDiv + '</li>';
                    selectArea.find('ol').append(selection);
                    option.remove();
                }
               
            }
            
            selectArea.attr('data-values', JSON.stringify(vals));
            
            $('li div', selectArea).off('click').on('click', function(ev){
               var $target = $(ev.currentTarget);
               var $li = $target.parent();
               var $multiSelect = $target.parent().parent().parent();
               var $dummy = $multiSelect.parent().find('input[id$="_dummy"]');
               var vals = JSON.parse($multiSelect.attr('data-values'));
               var valueId = $target.attr('data-val').replace('multiselect-item-','');
               $multiSelect.parent()
                           .find('select')
                           .prepend($('<option></option>').attr('value', $target.attr('data-val'))
                                                         .html(vals[valueId]));
               delete vals[valueId];
               $multiSelect.attr('data-values', JSON.stringify(vals));
               $target.remove();
               $li.remove();
               $dummy.val('');
           });
            
        });
        return this;
    };
})(jQuery); 